import { Form, Input, message } from 'antd';
import CommonModal from 'components/common/CommonModal';
import { useState } from 'react';
import { editPassword, resetPasswd } from 'apis/userCenter';

type PassWordProps = {
    title: string;
    visible?: boolean;
    setVisible?: (visible: boolean) => void;
    modalProps?: {
        [x: string]: any;
    };
    successCallback?: () => void;
    hideOldPassword: boolean;
};

export default function (props: PassWordProps) {
    // 新增弹框
    const {
        visible,
        setVisible,
        title = '修改密码',
        modalProps = {},
        successCallback,
        hideOldPassword = false,
    } = props;

    const onSubmit = (data: any, loadinCallback?: () => void, closeModalCallback?: () => void) => {
        if (hideOldPassword) {
            resetPasswd({
                newPasswd: data.newPassword,
            })
                .then(() => {
                    message.success('修改成功');
                    loadinCallback?.();
                    closeModalCallback?.();
                    successCallback?.();
                })
                .finally(() => {
                    loadinCallback?.();
                });
        } else {
            editPassword({ newPasswd: data.newPassword, oldPasswd: data.oldPassword })
                .then((res) => {
                    message.success('修改成功');
                    loadinCallback?.();
                    closeModalCallback?.();
                    successCallback?.();
                })
                .finally(() => {
                    loadinCallback?.();
                });
        }
    };
    const [newPassword, setNewPassword] = useState('');

    return (
        <CommonModal
            title={title}
            width={600}
            styles={{ body: { marginTop: '20px', marginBottom: '20px' } }}
            open={visible}
            close={() => {
                setVisible?.(false);
            }}
            formSetting={{ labelCol: { span: 4 }, wrapperCol: { span: 20 } }}
            onSubmit={onSubmit}
            initFormData={{}}
            {...(modalProps || {})}
        >
            {!hideOldPassword ? (
                <Form.Item
                    name='oldPassword'
                    label='原密码'
                    rules={[
                        { required: true, message: '请输入原密码' },
                        // {
                        // 	pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                        // 	message: '请输入正确的密码格式！密码格式为字母+数字形式，长度为8到16位!',
                        // },
                    ]}
                >
                    <Input.Password placeholder='请输入原密码' maxLength={16} />
                </Form.Item>
            ) : null}

            <Form.Item
                name='newPassword'
                label='新密码'
                rules={[
                    { required: true, message: '请输入新密码' },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                        message: '请输入正确的密码格式！密码格式为字母+数字形式，长度为8到16位!',
                    },
                ]}
            >
                <Input.Password
                    placeholder='请输入新密码'
                    maxLength={16}
                    onChange={(e) => setNewPassword(e.target.value)}
                />
            </Form.Item>
            <Form.Item
                name='confirmPassword'
                label='确认密码'
                rules={[
                    { required: true, message: '请再次输入新密码' },
                    () => ({
                        validator(_, value) {
                            console.log(value, newPassword);
                            if (!value || value == newPassword) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('密码输入不一致！'));
                        },
                    }),
                ]}
            >
                <Input.Password placeholder='请再次输入新密码' maxLength={16} />
            </Form.Item>
        </CommonModal>
    );
}
